<script setup lang='ts'>
// import IfShowCase from './components/IfShowCase.vue';
// import EventCase from './components/03_Vue3时间传递参数.vue'
// import bindCase from './components/04_Vue3的属性绑定.vue'
// import ForCase from './components/05_Vue3的循环列表.vue'
// import ModelCase from './components/06_Vue3的双向绑定.vue'
// import ComputedCase from './components/07_Vue3中的计算属性.vue'
// import WatchCase from './components/08_Vue3Watch监听器.vue';
// import LifeCase from './components/09_Vue3的生命周期钩子函数.vue'
// import { ref } from 'vue';
// const isShow = ref(true)
// import LifeVue2Case from './components/10_Vue2的生命周期函数.vue'
// import RefCase from './components/11_通过ref获取dom 元素.vue'
// import NBCase from './components/12_综合案例.vue';
// import HmHeader from './components/HmHeader.vue';
// import HmBody from './components/HmBody.vue';
// import HmFooter from './components/HmFooter.vue';
// import Parent from './components/13_父子通信中的父组件.vue'
// import GrandFather from './components/15_跨代传值的爷爷组件.vue'
// import SlotCase from './components/18_Vue3中的默认插槽技术.vue'
import { ref } from 'vue';
import HmTable from './components/19_Vue3封装的table组件.vue'

type PersonColumn = Array<{ label: string, field: string }>
type PersonArr = {
  id: number, username: string, age: number, ''?: ''
}
const columns: PersonColumn = [
  { label: '序号', field: 'id' },
  { label: '姓名', field: 'username' },
  { label: '年纪', field: 'age' },
  { label: '操作', field: '' },
]

const data = ref<PersonArr[]>([
  {
    id: 1,
    username: '张小华',
    age: 21
  },
  {
    id: 2,
    username: '朱小明',
    age: 21
  },
  {
    id: 3,
    username: '闰土',
    age: 21
  },
  {
    id: 4,
    username: '球球',
    age: 21
  }
])

const delData = (p: PersonArr) => {
  // 使用data.value来接收返回的数据
  data.value = data.value.filter(item => item.id !== p.id)
}

const addData = (i: number) => {
  let username = prompt('请输入要修改成的姓名:')!
  let age = +prompt('请输入修改对象的年纪')! || 0
  data.value[i] = { id: i + 1, username: username, age: age }
}

import SimpleData from './components/20_作用域插槽简单版本.vue'
</script>

<template>
  <!-- <IfShowCase></IfShowCase> -->
  <!-- <EventCase></EventCase> -->
  <!-- <bindCase></bindCase> -->
  <!-- <ForCase></ForCase> -->
  <!-- <ModelCase></ModelCase> -->
  <!-- <ComputedCase></ComputedCase> -->
  <!-- <WatchCase></WatchCase> -->
  <!-- <LifeCase v-if="isShow"></LifeCase>
   <button @click="isShow = !isShow">创建/销毁</button>
   <LifeVue2Case v-if="isShow"></LifeVue2Case> -->
  <!-- <RefCase></RefCase> -->
  <!-- <NBCase></NBCase> -->
  <!-- <div class="container">
    <HmHeader />
    <HmBody />
    <HmFooter />
  </div> -->
  <!-- <Parent></Parent> -->
  <!-- <GrandFather></GrandFather> -->
  <!-- <SlotCase>
    <template v-slot:header>
      <h1>这是头部内容</h1>
    </template>
<template v-slot:body>
      <h1>这是主体内容</h1>
    </template>
<template #footer>
      <h1>这是底部内容</h1>
    </template>
<template #default>
      <h1>我是一个默认的匿名插槽传入</h1>
    </template>

</SlotCase> -->
  <!-- <HmTable :columns="columns" :data="data">
     子组件中的数据 父组件使用 传入插槽时使用
    返回{"ret":{"id":1,"username":"张小华",age:21}}
    <template #op="obj">
      <button @click="addData(obj.index)">编辑</button>
      传入{"id":1,"username":"张小华",age:21}
      <button @click="delData(obj.ret)">删除</button>
    </template>
  </HmTable>
  <SimpleData>
    
      <template #row="obj"> 如果写obj的话用的是obj.p 
      如果写{ p }的话可以直接使用里面的p对象
   
      子组件中的数据 父组件使用 传入插槽时使用
    <template #row="{ p }">
      <h2>姓名:{{ p.name }},年纪:{{ p.age }}</h2>
    </template>
  </SimpleData> -->
  <div class="container">
    <div class="nav">
      <router-link to="/home">去主页</router-link>
      <router-link to="/login">去登录</router-link>
    </div>
    <router-view>

    </router-view>
  </div>

</template>

<style scoped>
.container {
  width: 50%;
  height: 60vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background-color: pink;
}
.nav a{
  margin-right: 10px;
  text-decoration: none;
}
.router-link-active {
  font-size: 20px;
}
</style>